<template>
  <div class="dash-bg">
    <el-alert
      v-if="isDemo"
      type="error"
      style="margin-bottom: 20px">
      为了保障演示系统的稳定性，重要演示数据无法修改和删除，您可以添加新的数据来体验！系统会不定时还原数据，请勿作为生产使用！
    </el-alert>
    <!-- <el-tooltip class="item" effect="dark" :value="!isChatOpen" content="智慧助教" placement="top-start">
      <div @click="openChat" class="chatbot" v-show="!isChatOpen">
        <img src="@/assets/images/deepseek.png" alt="deepseek" />
      </div>
    </el-tooltip> -->
    <!-- 对话框 -->
    <!-- <div
      v-show="isChatOpen"
      class="chat-dialog"
      draggable="true"
      :style="{ top: dialogTop, right: dialogRight }">
      <div class="chat-header">
        <span class="chat-title">智慧助教系统</span>
        <button
          class="chat-close"
          @click="closeChat">
          ×
        </button>
      </div>
      <div class="chat-body">
        <iframe
          src="http://222.30.145.21:3000"
          frameborder="0"
          width="100%"
          height="100%"
          allowfullscreen>
        </iframe>
      </div>
    </div> -->
    <div class="bannerBox">
      <img
        class="banner"
        src="@/assets/dash/banner.png" />
      <div class="bannerTxt">
        <span class="titleZH">欢迎来到大模型智慧助教系统“子路”</span>
        <span class="titleEN">WELCOME TO THE SMART TEACHING ASSISTANT SYSTEM</span>
      </div>
    </div>
    <card-course-q-e />
  </div>
</template>

<script>
import permission from "@/directive/permission";
import CardCourseQE from "@/views/dashboard/components/CardCourseQE.vue";
import { mapGetters } from "vuex";

export default {
  components: { CardCourseQE },
  directives: { permission },
  data() {
    return {
      isDemo: this.$demo,
      isChatOpen: false, // 控制消息窗的显示与隐藏
    };
  },
  computed: {
    ...mapGetters(["siteData"]),
  },
  methods: {
    // openChat() {
    //   this.isChatOpen = true;
    //   // 根据点击位置动态调整对话框位置
    //   const rect = event.target.getBoundingClientRect();
    //   this.dialogTop = `${rect.top + window.scrollY}px`; // 调整垂直位置
    //   this.dialogRight = `${window.innerWidth - rect.right}px`; // 调整水平位置
    // },
    // closeChat() {
    //   this.isChatOpen = false; // 关闭对话框
    // },
  },
  mounted() {
    const id = sessionStorage.getItem("id");
    const username = id;
    const url = `http://111.63.183.17:8083?username=${username}&id=${id}`;
    if (this.$store.state.data.managerChatWindow === false) {
      this.$notify({
        title: "快来使用吧！",
        dangerouslyUseHTMLString: true,
        message: `<strong>子路教育大模型已经本地部署和接入DeepSeek，点击此处<a href='${url}' target='_blank' style='color:red'>体验完整服务</a></strong>`,
        duration: 0,
        offset: 100,
      });
      this.$store.commit("data/updateManagerChatWindow", true);
    }
  },
};
</script>

<style scoped lang="scss">
.chatbot {
  display: flex;
  position: fixed;
  z-index: 99;
  top: 40%;
  right: 4%;
  cursor: pointer;
  img {
    width: 90px;
  }
}

.chat-dialog {
  position: fixed;
  width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
  .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #4880ff;
    color: #fff;
    font-weight: bold;
    .chat-title {
      font-size: 16px;
    }
    .chat-close {
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .chat-body {
    height: 400px;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
}

.bannerBox {
  width: 100%;
  position: relative;
  .banner {
    width: 100%;
    max-height: 330px;
    object-fit: cover;
    border-radius: 16px;
  }
  .bannerTxt {
    max-height: 330px;
    position: absolute;
    top: 50%;
    left: 9.2vw;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    .titleZH {
      color: #4880ff;
      font-size: 2.78vw;
      font-weight: bold;
      position: relative;
    }
    .titleZH::after {
      content: "欢迎来到大模型智慧助教系统“子路”";
      color: #4880ff;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      -webkit-text-stroke: 2px #fff;
    }
    .titleEN {
      color: #5a5a5a;
      font-size: 0.97vw;
      margin-top: 1vw;
    }
  }
}
</style>
